import AutoChart from '@/components/Echarts/AutoChart';
import { graphic } from 'echarts';
import React from 'react';
import { useImmer } from 'use-immer';

const ColumnCharts: React.FC = () => {
  const time = [
    '2022-05',
    '2022-06',
    '2022-07',
    '2022-08',
    '2022-09',
    '2022-10',
    '2022-11',
    '2022-12',
    '2023-01',
    '2023-02',
    '2023-03',
    '2023-04',
    '2023-05',
    '2023-06',
    '2023-07',
    '2023-08',
    '2023-09',
    '2023-10',
    '2023-11',
    '2023-12',
  ];

  const category: string[] = [];
  let dottedBase = Number(new Date());
  const lineData: number[] = [];
  const barData1: number[] = [];
  const barData2: number[] = [];
  const barData3: number[] = [];

  for (let i = 0; i < 20; i += 1) {
    const date = new Date((dottedBase += 3600 * 24 * 1000));
    category.push([date.getFullYear(), date.getMonth() + 1, date.getDate()].join('-'));
    const b = Math.floor(Math.random() * 200);
    const d1 = Math.floor(Math.random() * 200);
    const d2 = Math.floor(Math.random() * 200);
    const d3 = Math.floor(Math.random() * 200);
    barData1.push(d1);
    barData2.push(d2);
    barData3.push(d3);
    lineData.push(b);
  }

  const [options, setOptions] = useImmer({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      data: ['line', 'bar'],
      textStyle: {
        color: '#ccc',
      },
    },
    xAxis: {
      // data: category,
      data: time,
      axisLine: {
        lineStyle: {
          color: '#ccc',
        },
      },
    },
    yAxis: {
      splitLine: { show: false },
      axisLine: {
        lineStyle: {
          color: '#ccc',
        },
      },
    },
    series: [
      {
        name: '平肝息风类',
        type: 'line',
        smooth: true,
        showAllSymbol: true,
        symbol: 'emptyCircle',
        symbolSize: 15,
        data: lineData,
      },
      {
        name: '收涩类',
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          borderRadius: 5,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#14c8d4' },
            { offset: 1, color: '#43eec6' },
          ]),
        },
        data: barData1,
      },
      {
        name: '活血化瘀类',
        type: 'bar',
        barGap: '-100%',
        barWidth: 10,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(20,200,212,0.5)' },
            { offset: 0.2, color: 'rgba(20,200,212,0.2)' },
            { offset: 1, color: 'rgba(20,200,212,0)' },
          ]),
        },
        z: -12,
        data: barData2,
      },
      {
        name: '清热类',
        type: 'pictorialBar',
        symbol: 'rect',
        itemStyle: {
          color: '#0f375f',
        },
        symbolRepeat: true,
        symbolSize: [12, 4],
        symbolMargin: 1,
        z: -10,
        data: barData3,
      },
    ],
  });

  return <AutoChart option={options as any}></AutoChart>;
};
export default ColumnCharts;
